<template>
    <div>
        <h1>我的购物车2.0</h1>
        <ul>
            <li v-for="(v, index) of school" :key="index">
                <p>{{v.class}}</p>
                <p>{{v.num}}</p>
                <p >
                    <button @click="subper(index)">-</button>
                    {{v.per}}
                    <button @click="addper(index)">+</button>
                </p>
            </li>
        </ul>
        <h3>总人数: {{ totalPerson }}</h3>
        <button @click="empty">清空总人数</button>
    </div>
</template>

<script>
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: "CartTwo",
    data() {
        return {
            school: [
                {class: "gradeOne", num: 25, per: 0},
                {class: "gradeTwo", num: 18, per: 0},
                {class: "gradeThree", num: 36, per: 0},
            ]
        }
    },
    methods: {
        subper: function(index) {
            // console.log(index)
            if( this.school[index].per > 0) {
                this.school[index].per--
            }
        },
        addper: function(index) {
            // console.log(index)
            this.school[index].per++
        },
        empty: function() {
            this.school.map(v => v.per = 0)
        },
    },
    computed: {
        totalPerson: function(){
            return this.school.reduce((total, v) => {
                return total += v.num * v.per 
            }, 0)
        }
    },
}
</script>

<style>

</style>